<template>
    <div :class="cns">
        <slot></slot>
    </div>
</template>
<script lang="ts">
import { computed, defineComponent } from 'vue'

export default defineComponent({
    props:{
        mini:{type:Boolean},
    },
    setup(props) {
        const cns = computed(()=>{
            return {
                'ph-action-bar':true,
                'ph-action-bar-mini':props.mini
            }
        })
        return {cns}
    },
})
</script>

<style lang="scss">
.ph-action-bar{
    padding: var(--ph-10) var(--ph-15);
    border: 1px solid var(--ph-bd-light);
    color: var(--ph-c-d1);
    background-color: var(--ph-light-l1);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex: 0 0 auto;
    width: 100%;
    position: relative;
    z-index: 1;
    white-space: nowrap;
    &-mini{
        padding: var(--ph-5) var(--ph-10);
    }
}
</style>